<template>
	<view class="forgot-password-page">
		<!-- 顶部标题区域 -->
		<view class="page-header">
			<!-- <text class="header-title">忘记密码</text> -->
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 手机号输入 -->
			<view class="form-item">
				<text class="label">手机号</text>
				<input type="number" v-model="phone" placeholder="请输入手机号" class="input" maxlength="11" />
			</view>

			<!-- 验证码输入 -->
			<view class="form-item">
				<text class="label">验证码</text>
				<input type="number" v-model="code" placeholder="请输入验证码" class="input" maxlength="6" />
				<button class="code-btn" :disabled="isSending" @click="sendCode">{{ codeText }}</button>
			</view>

			<!-- 新密码输入 -->
			<view class="form-item">
				<text class="label">新密码</text>
				<input type="password" v-model="newPassword" placeholder="请输入新密码" class="input" />
			</view>

			<!-- 确认新密码输入 -->
			<view class="form-item">
				<text class="label">确认新密码</text>
				<input type="password" v-model="confirmPassword" placeholder="请再次输入新密码" class="input" />
			</view>

			<!-- 提交按钮 -->
			<button class="submit-btn" @click="submitForm" :disabled="!isFormValid">确认修改</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '', // 手机号
				code: '', // 验证码
				newPassword: '', // 新密码
				confirmPassword: '', // 确认新密码
				isSending: false, // 是否正在发送验证码
				codeCount: 60, // 验证码倒计时
				codeText: '获取验证码' // 验证码按钮文本
			};
		},
		computed: {
			// 表单是否有效
			isFormValid() {
				return this.phone.length === 11 &&
					this.code.length === 6 &&
					this.newPassword.length >= 3 &&
					this.confirmPassword === this.newPassword;
			}
		},
		methods: {
			// 发送验证码
			sendCode() {
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				this.isSending = true;
				this.codeText = `${this.codeCount}秒后重新获取`;

				// 模拟发送验证码接口请求
				const timer = setInterval(() => {
					this.codeCount--;
					this.codeText = `${this.codeCount}秒后重新获取`;
					if (this.codeCount <= 0) {
						clearInterval(timer);
						this.isSending = false;
						this.codeCount = 60;
						this.codeText = '获取验证码';
					}
				}, 1000);

				// 实际项目中这里调用真实的发送验证码接口
				// 示例：
				// uni.request({
				//   url: '/api/sendCode',
				//   method: 'POST',
				//   data: { phone: this.phone, type: 'forgot' },
				//   success: (res) => {
				//     if (res.data.code !== 0) {
				//       uni.showToast({
				//         title: res.data.msg || '发送失败，请重试',
				//         icon: 'none'
				//       });
				//       clearInterval(timer);
				//       this.isSending = false;
				//       this.codeCount = 60;
				//       this.codeText = '获取验证码';
				//     }
				//   },
				//   fail: () => {
				//     uni.showToast({
				//       title: '网络异常，请重试',
				//       icon: 'none'
				//     });
				//     clearInterval(timer);
				//     this.isSending = false;
				//     this.codeCount = 60;
				//     this.codeText = '获取验证码';
				//   }
				// });
			},

			// 提交表单
			submitForm() {
				// 实际项目中调用修改密码接口
				uni.showLoading({
					title: '提交中...'
				});

				// 模拟接口请求
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '密码修改成功',
						icon: 'success'
					});

					// 跳转到登录页
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1000);
				}, 1000);
			}
		}
	};
</script>

<style>
	/* 页面整体样式 */
	.forgot-password-page {
		min-height: 100vh;
		background-color: #f5efff;
		padding: 30rpx;
		box-sizing: border-box;
	}

	/* 顶部标题 */
	.page-header {
		margin: 40rpx 0;
		text-align: center;
	}

	/* .header-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #6a4894;
	} */

	/* 表单容器 */
	.form-container {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}

	/* 表单项 */
	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		border-bottom: 1px solid #eee;
		padding-bottom: 20rpx;
	}

	.label {
		width: 160rpx;
		font-size: 30rpx;
		color: #6a4894;
	}

	.input {
		flex: 1;
		font-size: 30rpx;
		color: #333;
	}

	/* 验证码按钮 */
	.code-btn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #9370db;
		color: #fff;
		font-size: 24rpx;
		border-radius: 30rpx;
	}

	.code-btn[disabled] {
		background-color: #ccc;
		color: #fff;
	}

	/* 提交按钮 */
	.submit-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #9370db;
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
		margin-top: 40rpx;
	}

	.submit-btn[disabled] {
		background-color: #ccc;
		color: #fff;
	}
</style>